﻿@model IEnumerable<kqthkGiaoTrinh>
@using Kendo.Mvc.UI

@if (Model.Count() > 0)
{
    // Tinh phan tram
    string data = "<script> _data=[";
    int TongGiaoTrinh = 0;

    TongGiaoTrinh = Model.Count();
    var dsGiaoTrinh = Model.GroupBy(e => new { e.MaNXB, e.TenNXB }).Select(e =>
        new DynamicData
        {
            ID = e.Key.MaNXB,
            Name = e.Key.TenNXB,
            Total = e.Count()
        });
    foreach (var item in dsGiaoTrinh)
    {
        data += "['" + item.Name + "'," + Math.Round((float)item.Total / TongGiaoTrinh, 3).ToString().Replace(',', '.') + "],";
    }
    data = data.Substring(0, data.Length - 1);
    data += "]; ";
    data += " </script>";


    string data2 = "<script> _data2=[";
    var chiaHDT_TC = Model.Where(m => m.TenHeDaoTao.ToString().Trim() == "Trung cấp");
    if (chiaHDT_TC.Count() != 0)
    {
        foreach (var item in chiaHDT_TC)
        {
            data2 += "[" + item.GiaNiemYet + "," + item.SoTrang + "],";
        }
        data2 = data2.Substring(0, data2.Length - 1);
    }
    data2 += "]; ";
    data2 += " </script>";
    
    string data3 = "<script> _data3=[";
    var chiaHDT_CD = Model.Where(m => m.TenHeDaoTao.ToString().Trim() == "Cao đẳng");
    if (chiaHDT_CD.Count() != 0)
    {
        foreach (var item in chiaHDT_CD)
        {
            data3 += "[" + item.GiaNiemYet + "," + item.SoTrang + "],";
        }
        data3 = data3.Substring(0, data3.Length - 1);
    }
    data3 += "]; ";
    data3 += " </script>";
    
    string data4 = "<script> _data4=[";
    var chiaHDT_DH = Model.Where(m => m.TenHeDaoTao.ToString().Trim() == "Đại học");
    if (chiaHDT_DH.Count() != 0)
    {
        foreach (var item in chiaHDT_DH)
        {
            data4 += "[" + item.GiaNiemYet + "," + item.SoTrang + "],";
        }
        data4 = data4.Substring(0, data4.Length - 1);
    }
    data4 += "]; ";
    data4 += " </script>";
    
    @Html.Raw(data)
    @Html.Raw(data2)
    @Html.Raw(data3)
    @Html.Raw(data4)
    
    <div id="container"></div>
    
    <script>
        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: 'Thống kê giáo trình theo Nhà xuất bản',
                    x: -20
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                subtitle: {
                    text: 'Tổng số giáo trình: @TongGiaoTrinh',
                    x: -20
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    },
                    showInLegend: true
                },
                series: [{
                    type: 'pie',
                    name: 'Lượng giáo trình chiếm',
                    data: _data
                }]
            });
        });

    </script>
    <br /><br />
    <div id="container2"></div>
    <script>

    $(function () {
        $('#container2').highcharts({
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: 'Thống kê về Giá niêm yết và Số trang'
            },
            subtitle: {
                text: 'Dựa theo ba Hệ đào tạo'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'Giá (Nghìn đồng)'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Số trang (trang)'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                borderWidth: 1
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}</b><br>',
                        pointFormat: '{point.x} Nghìn đồng, {point.y} Trang'
                    }
                }
            },
            series: [{
                name: 'Trung cấp',
                color: 'rgba(223, 83, 83, .5)',
                data: _data2

            }, {
                name: 'Cao đẳng',
                color: 'rgba(119, 152, 191, .5)',
                data: _data3
            }, {
                name: 'Đại học',
                color: 'rgba(255, 119, 0, 1)',
                data: _data4
            }]
        });
    });


    </script>
    <br /><br />
    @*<hr />
    <button class="btn btn-danger" onclick="tableToExcel('#Grid table','tkChuyenNganh')">Xuất Excel</button>
    <div class="clear pb10 "> </div>
    <div class="table-responsive">
        @( Html.Kendo().Grid(Model)
                    .Name("Grid")
                        .Pageable(page => page  // Phân trang
                            //.ButtonCount(3)    // Số button hiển thị phân trang
                                .Info(true)   // Hiển thị thông tin dữ liệu dưới cùng góc bên phải Grid
                                .Refresh(true)   // Hiển thị nút làm mới Grid
                                        .Messages(mess => mess
                                        .Display("{0}-{1} của {2} bản ghi.")
                                        .Empty("Không có dữ liệu")
                                        .Refresh("Làm mới")
                                        .First("Trang đầu tiên")
                                        .Last("Trang cuối cùng")
                                        .Next("Trang tiếp")
                                        .Previous("Trang trước")
                                    )
                                 .Input(false)
                            )
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.MaGiaoTrinh);
                        columns.Bound(p => p.TenGiaoTrinh);
                        columns.Bound(p => p.HieuDinh);
                        columns.Bound(p => p.TenNXB);
                        columns.Bound(p => p.GiaNiemYet);
                        columns.Bound(p => p.TenTacGia);
                    })
                    .DataSource(dataSource => dataSource
                        .Ajax()
        //.PageSize(3)
                     )
        //.Filterable()
        //.Sortable()
        )
    </div>*@
}
else
{
    <h4 class="no-data">Không có dữ liệu</h4>
}
